<template>
    <div class="map-wrap1">
        <div id="allmap"></div>
        <div class="slide-body map-periphery">
            <div class="slide">
                <a class="items" :class="{active:(indexs == index)}" v-for="(mapList, index) in mapLists" @click="searchLocal(mapList.txt, index)">
                    <i class="icon iconfont" :class="mapList.icon"></i>
                    <span class="txt">{{ mapList.txt }}</span>
                </a>
            </div>
        </div>
    </div>
</template>


<script>
    import BaiduMap from '../../static/map.js';

    export default {
        name: 'baidu',
        props: ['longitude', 'latitude'],
        data() {
            return {
                mapLists: [
                    {icon: 'icon-xuexiao', txt: '高速'},
                    {icon: 'icon-jiaotong', txt: '公交'},
                    {icon: 'icon-yiyuan', txt: '餐饮'},
                    {icon: 'icon-yinhang', txt: '银行'},
                    {icon: 'icon-gouwu', txt: '园区'}
                ],
                indexs: 0
            };
        },
        mounted() {
            BaiduMap.init()
                .then((BMap) => {
                    // 百度地图API功能
                    var map = new BMap.Map('allmap');
                    var point = new BMap.Point(116.331398, 39.897445);
                    map.centerAndZoom(point, 15);
                    map.enableScrollWheelZoom(false);
                    map.disableDragging();
                    // 创建地址解析器实例
                    map.clearOverlays();
                    var new_point = new BMap.Point(this.longitude, this.latitude);
                    var marker = new BMap.Marker(new_point);  // 创建标注
                    map.addOverlay(marker);              // 将标注添加到地图中
                    map.panTo(new_point);
                    var circle = new BMap.Circle(new_point, 1000, {
                        fillColor: 'blue',
                        strokeWeight: 1,
                        fillOpacity: 0.3,
                        strokeOpacity: 0.3
                    });
                    map.addOverlay(circle);
                    var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
                    local.searchNearby('高速', new_point, 1000);
                });
        },
        methods: {
            searchLocal(v, n) {
                this.indexs = n;
                var map = new BMap.Map('allmap');
                var point = new BMap.Point(116.331398, 39.897445);
                map.centerAndZoom(point, 15);
                map.enableScrollWheelZoom(false);
                map.disableDragging();
                // 创建地址解析器实例
                map.clearOverlays();
                var new_point = new BMap.Point(this.longitude, this.latitude);
                var marker = new BMap.Marker(new_point);  // 创建标注
                map.addOverlay(marker);              // 将标注添加到地图中
                map.panTo(new_point);
                var circle = new BMap.Circle(new_point, 1000, {
                    fillColor: 'blue',
                    strokeWeight: 1,
                    fillOpacity: 0.3,
                    strokeOpacity: 0.3
                });
                map.addOverlay(circle);
                var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
                local.searchNearby(v, new_point, 1000);
            }


        }
    };
</script>

<style scoped>
    @import '../assets/css/sale-details.css';

    .map-wrap1 {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .slide-body.map-periphery {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 46px;
    }

    .items.active {
        background-color: #333;
        color: #fff;
    }
</style>
